import React, {Component, PropTypes} from 'react'

//函数组件
function Content(props) {
    return <p>Content组件的props.value：{props.value}</p>;
}
// 使用了PropTypes.number.isRequired来保证Content组件的props.value必须为数字类型，且不能为空。
Content.propTypes = {
    value: PropTypes.number.isRequired
};

export default class Counter extends Component{
    // 在子类的构造函数中，必须先调用super()，才能使用this获取实例化对象。这是ES2015类的一个规则。
    // constructor是类的默认方法，通常无须编写。但是如果想在构造函数中编写一些逻辑（比如，初始化内部状态、为组件方法绑定this等），
    // 就需要单独编写了。
    constructor(){
        super();
        //构造函数中初始化内部状态
        this.state={value:0};
    }
    render(){
        return (
            <div>
                {/*button的点击事件注册了更新内部状态的方法*/}
                <button onClick={()=>this.setState({value:this.state.value+1})}>
                    INCREMENT
                </button>
                Counter组件的内部状态：
                <pre>{JSON.stringify(this.state, null, 2)}</pre>

                {/*向一个组件传递props的方法是将数据写在组件标签的属性中。*/}
                <Content value={this.state.value}/>
            </div>
        );
    }
}

